<template>
  <el-container>
    <el-header>
      <el-row style="background-color: aliceblue;height: 45px;padding-top: 10px;">
        <el-col v-for="item in stepConfig.steps" :span="3">
          <vxe-icon  v-if="item.index != 1" name="arrow-double-right" status="info" />
          <vxe-button style="margin-left: 50px;font-size: 16px;" mode="text" :status="item.status"
            :content="item.stepname" icon="vxe-icon-link" :size="size" @click="handleStepClick(item)" />
        </el-col>
      </el-row>
    </el-header>
    <el-main>
      <el-form style="width: 50%;" label-width="80px">
        <el-row v-if="formData.sfxcsh">
          <el-col :span="12">
            <el-form-item label="开始日期:">
              <label> {{ formData.ksrq }} </label>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="结束日期:">
              <label> {{ formData.jsrq }} </label>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="formData.sfxcsh">
          <el-col :span="12">
            <el-form-item label="审核员:">
              <label> {{ formData.shy }} </label>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="人天:">
              <label> {{ formData.shts }} </label>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-form-item label="客户要求:">
            <vxe-textarea style="width: 80%;" v-model="formData.khyq" max-length="1000" show-word-count></vxe-textarea>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="备注:">
            <vxe-textarea style="width: 80%;" v-model="formData.bz" max-length="1000" show-word-count></vxe-textarea>
          </el-form-item>
        </el-row>
        <el-row>
            <vxe-button v-if="stepConfig.save" status="primary" content="保存" @click="handleSave"></vxe-button>
            <vxe-button v-if="stepConfig.endprocess" status="success" content="完成流程"
              @click="handleEndProcess"></vxe-button>
         
        </el-row>
      </el-form>

    </el-main>
  </el-container>
</template>
<script>

import PageConfig from '@/utils/pageConfig';
import XEUtils from 'xe-utils';

export default {
  name: 'Step',
  props: ['stepConfig'],
  data() {
    return {
      size: PageConfig.ComponentSize,
      formData: {
        id: undefined,
        ksrq: undefined,
        jsrq: undefined,
        shy: undefined,
        shts: undefined,
        khyq: undefined,
        bz: undefined,
        sfxcsh: true,
        lcmc:undefined,
        lczt:'N'
      }
    }
  },
  computed: {

  },
  created() {

  },
  methods: {
    handleStepClick(item) {
      this.formData.id = item.id;
      this.formData.ksrq = item.ksrq;
      this.formData.jsrq = item.jsrq;
      this.formData.shy = item.shy;
      this.formData.shts = item.shts;
      this.formData.khyq = item.khyq;
      this.formData.bz = item.bz;
      this.formData.sfxcsh = item.sfxcsh;
      this.formData.lcmc = item.stepname;
      this.formData.lczt = item.lczt;
    },
    handleSave() {
      this.$emit('SaveEvent', this.formData)
    },
    handleEndProcess() {
      this.$emit('EndProcessEvent', this.formData)
    }
  }
}
</script>
<style scoped></style>
